<template>
  <div>
    <h2>
      data 属性中的值：
      <!--     回把当前变化的值 传递给父组件-->
      <!--      <input :type="type1" v-model="valueson" @input="$emit('sonMethod',valueson)">-->
      <!--   也可以这样-->
      <input :type="type1" v-model="valueson" @input="sendDataToParent">
      <br/>
      子组件修改父组件传来的值为:{{valueson}}
    </h2>
  </div>
</template>

<script>
export default {
  //用于定义子组件中data数据的名称
  //props表示属性：指的子组件所拥有的标签属性！
  props:["type1","value1"],
  data() {
    return {
      //this.value1仅仅只是初始化子组件的时候赋初始值，无法在后续通过value1的改变来改变valueson
      //valueson最终 将会用来传递给父组件！
      valueson:this.value1
    }
  },
  methods:{
    sendDataToParent(){
      //通过$emit将子组件中的数据传递给父组件
      this.$emit('sonMethod', this.valueson);
      console.log("sendDataToParent:" + this.valueson)
    }
  },
  //只能通过watch监听来改变data中的值
  //监听父组件的传值，进而更改子组件中的临时变量
  watch:{
    value1:{
      handler(newValue,oldValue){
        console.log(newValue,oldValue);
        this.valueson = newValue
      }
    },
  }
}
</script>
